/**
 * Created by Administrator on 2017/6/13.
 */
angular
    .module('myApp',[],['$compileProvider',function ($compileProvider) {
        $compileProvider.directive('collapsibleView',function () {
            return {
                restrict : 'ECMA',
                replace : true,
                template :
                '<div id="collapsibleView"><div class="panel panel-primary" ng-repeat="item in data">' +
                '<div class="panel-heading">{{item.title}}</div>' +
                '<div class="panel-body" style="display: none"><p ng-repeat="x in item.array">{{x}}</p></div>' +
                '</div></div>',
                link : function (scope, ele, attr, controller) {
                    $(function () {
                        // $('#collapsibleView .panel .panel-heading').on('click',function () {
                        //     $(this).next().slideDown(300).parent().siblings().children('.panel-body').slideUp(300);
                        // });
                        $(ele).find('.panel-heading').on('click',function () {
                            $(this).next().slideDown(300).parent().siblings().children('.panel-body').slideUp(300);
                        });
                    });
                }
            }
        });
    }])
    .controller('MyController',function ($scope) {
        $scope.data = [
            {
                title : '第一行',
                array : ['第一行 第1个','第一行 第2个','第一行 第3个','第一行 第4个']
            },
            {
                title : '第二行',
                array : ['第二行 第1个','第二行 第2个','第二行 第3个','第二行 第4个']
            },
            {
                title : '第三行',
                array : ['第三行 第1个','第三行 第2个','第三行 第3个','第三行 第4个']
            },
            {
                title : '第四行',
                array : ['第四行 第1个','第四行 第2个','第四行 第3个','第四行 第4个']
            }
        ];
    });